<template>
    <div class="main">
        <el-row class="global-row">
            <el-col :span="24" class="font-center">
                <div class="fz18">
                    <span>{{ info.name }}</span>
                    <span>({{ info.subtitle }})</span>
                </div>
            </el-col>
        </el-row>
        <el-row class="global-row">
            <el-col :span="24">
                <div class="full-row">
                    <div class="flex">
                        <div class="date-label">
                            <span>有效日期</span>
                            <span>Effective Date</span>
                        </div>
                        <div class="date-num">:</div>
                    </div>
                    <div class="date-num">
                        14
                        <span class="unit">(日)day</span>
                    </div>
                    <div class="date-num">/</div>
                    <div class="date-num">
                        11
                        <span class="unit">(月)month</span>
                    </div>
                    <div class="date-num">/</div>
                    <div class="date-num">
                        24
                        <span class="unit">(年)year</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="global-row">
            <el-col :span="12">
                <div class="flex pl20">
                    <div class="column-center">
                        <span> 地點:</span>
                        <span class="normalfont"> Location</span>
                    </div>
                    <span>{{ info.location }}</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="flex">
                    <div class="column-center">
                        <span> 分判商(如有):</span>
                        <span class="normalfont"> Subcontractor(if applicable)</span>
                    </div>
                    <span>{{ info.subcontractor }}</span>
                </div>
            </el-col>
        </el-row>
        <el-row class="global-row" style="height: 140px;">
            <el-col :span="8">
            </el-col>
            <el-col :span="16">
                <div class="column-center">
                    <img v-if="info.signature[0].defaultValue" src="@/assets/success.png" alt="" style="width: 133px;">
                    <span>(符合所有項目)<span class="normalfont">Comply to all</span></span>
                </div>
            </el-col>
        </el-row>
        <el-row class="global-row">
            <el-col :span="24">
                <div class="fz18 pl20">
                    <div class="column-center">
                        <span> {{ info.signature[0].label }}:</span>
                        <span> {{ info.signature[0].subtitle }}:</span>
                    </div>
                    <img :src="info.signature[0].defaultValue" alt="" style="width: 140px;">
                </div>
            </el-col>
        </el-row>
        <el-row class="global-row noboreder">
            <el-col :span="24">
                <div class="fz18 pl20">
                    <div class="column-center">
                        <span> Circle Item for</span>
                        <span> Improvement (if only)</span>
                    </div>
                    <span>請圈出須改善的項目(如有)[共{{total}}項][Total {{total}} items]</span>
                </div>
            </el-col>
        </el-row>
        <el-row class="global-row noboreder">
            <el-col :span="8" class="nopadding">
                <div class="merge">
                    <div class="img">
                        <img :src="aObjects[0]?.image" alt="">
                    </div>
                    <div class="content">
                        <span class="merge-subtitle">{{ aObjects[0]?.label }}</span> <br>
                        <span class="merge-subtitle">{{ aObjects[0]?.subtitle }}</span>
                        <div class="merge-item" v-for="item in aObjects[0]?.options">
                            <span>{{ item.label }}</span>
                            <span>{{ item.value }}</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="16" class="nopadding">
                <el-row class="global-row wrap four">
                    <template v-for="(item, index) in bObjects">
                        <el-col :span="6">
                            <img :src="item.image" alt="">
                        </el-col>
                        <el-col :span="6">
                            <div class="column-item">
                                <span>{{ item.label }}</span>
                                <span class="fz12">{{ item.subtitle }}</span>
                            </div>
                        </el-col>
                    </template>
                </el-row>
            </el-col>
        </el-row>
        <el-row class="global-row wrap six">
            <template v-for="(item, index) in otherObjects">
                <el-col :span="4">
                    <img :src="item.image" alt="">
                </el-col>
                <el-col :span="4">
                    <div class="column-item">
                        <span>{{ item.label }}</span>
                        <span class="fz12">{{ item.subtitle }}</span>
                    </div>
                </el-col>
            </template>
        </el-row>
    </div>
</template>
<script>
import {apiRequests} from '../api/risk/index'
export default {
    data() {
        return {
            total: 0,
            info:{},
            aObjects: [],
            bObjects: [],
            otherObjects: [],
        }
    },
    created() {
        const storageKeys = {
            puuid: "puuid",
            userUuid: "uuid",
            corpCode: "myCorpCode",
            token: "auxfaceToken",
        };

        Object.entries(this.$route.query).forEach(([key, value]) => {
            if (value && storageKeys[key]) {
                sessionStorage.setItem(storageKeys[key], value);
            }
        });
        this.getCheckList();
    },
    methods: {
        async getCheckList() {
            let res = await apiRequests.getDetail({uuid: this.$route.query.uuid})
            this.total = res.data.formData.length
            this.info = res.data
            const { aObjects, otherObjects } = res.data.formData.reduce((acc, item) => {
                if (item.defaultValue instanceof Array) {
                    acc.aObjects.push(item);
                } else {
                    acc.otherObjects.push(item);
                }
                return acc;
            }, { aObjects: [], otherObjects: [] });
            this.aObjects = aObjects;
            this.bObjects = otherObjects.splice(0,4)
            this.otherObjects = otherObjects
        }
    }
}
</script>
<style lang="scss" scoped>
.main{
    width: 650px;
    margin: 20px auto;
    font-weight: bold;
}
.global-row{
    display: flex;
    &.wrap{
        flex-wrap: wrap;
        .el-col{
            border-top: 2px solid #666;
            border-right: 2px solid #666;
            padding: 3px 5px;
        }
        .fz12{
            letter-spacing: -1px;
            line-height: 16px;
        }
    }
    &.four{
        .el-col{
            &:nth-child(4n){
                border-right: none;
            }
        }
    }
    &.six{
        .el-col{
            &:nth-child(6n){
                border-right: none;
            }
        }
    }
    &:not(:last-child){
        border-bottom: 2px solid #666;
    }
    .fz18{
        display: flex;
        align-items: center;
    }
    .el-col{
        display: flex;
        align-items: center;
        padding: 3px 10px;
        &:not(:last-child){
            border-right: 2px solid #666;
        }
    }
    .font-center{
        justify-content: center;
    }
    .full-row{
        display: flex;
        justify-content: space-between;
        width: 90%;
        .date-label{
            display: flex;
            flex-direction: column;
            font-size: 22px;
            line-height: 26px;
            padding: 10px 15px;
        }
        .date-num{
            font-size: 34px;
            position: relative;
            .unit{
                position: absolute;
                font-size: 12px;
                bottom: 3px;
                left: 50%;
                transform: translateX(-50%);
                white-space: pre;
                font-weight: 400;
            }
        }
    }
    .merge{
        display: flex;
        height: 100%;
        width: 100%;
        font-size: 13px;
        border-top: 2px solid #666;
        .img{
            border-right: 2px solid #666;
            width: calc(50% + 1px);
            flex: 0 0 auto;
        }
        .merge-subtitle{
            letter-spacing: -1px;
        }
        .merge-item{
            margin-top: 6px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .content{
            padding: 5px;
        }
    }
    .el-col-16{
        justify-content: center;
    }
}
.nopadding{padding: 0!important;}
.noboreder{border-bottom: none!important;}
.normalfont{font-weight: 400;}
.column-item{
    display: flex;
    flex-direction: column;
    font-size: 13px;
    
    .column-subtitle{
        font-size: 12px;
        letter-spacing: -1px;
    }
}
.column-center{
    display: flex;
    flex-direction: column;
    font-size: 14px;
    padding-right: 15px;
    line-height: 16px;
    &>span:last-child{
        font-size: 13px;
    }
    &.font-left{
        align-items: flex-start;
    }
}
img{
    width: 100%;
}
.flex{display: flex;align-items: center;}
.fz18{font-size: 18px;}
.fz12{font-size: 12px;}
.pl20{padding-left: 10px;}
</style>